<template>
  <div class="tech_team">
    <div class="setting_title">教学团队设置</div>
    <div class="team_content">
      <div v-for="(item,index) in teachers" :key="index">
        <img :src="item.tech_pic" class="teacher">
        <div class="setting_title" style="font-size: 20px">{{ item.username }}</div>
      </div>
    </div>
    <div class="update_content">
      <div v-if="teachers.length<=0" class="setting_title" style="font-size: 25px">
        <P>空空如也的教师团队————</P>
        <p>来添加第一个教师吧！</p>
      </div>
      <el-button @click="handleDel">批量删除</el-button>
      <el-button @click="handleInsert">添加教师</el-button>
      <el-table :data="teachers"
                border
                style="width: 100%;"
                height="100%"
                @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center"/>
        <el-table-column property="user_id" label="教师id" min-width="120" align="center"/>
        <el-table-column property="username" label="真实姓名" min-width="120" align="center"/>
        <el-table-column property="phone_num" label="电话号码" min-width="180" align="center"/>
        <el-table-column label="加入日期" width="300" align="center">
          <template #default="scope">{{ scope.row.update_time }}</template>
        </el-table-column>
        <el-table-column align="center" fixed="right" label="操作" min-width="120">
          <template #default="scope">
            <el-button type="primary" size="default" @click="handleClick(scope.row)">查看</el-button>
            <el-button type="primary" size="default" @click="handleUpdateClick(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 显示详情 -->
      <el-dialog title="教师详情" v-model="dialogVisible" width="40%">
        <div v-if="selectedTeacher">
          <p>教师ID: {{ selectedTeacher.user_id }}</p>
          <p>真实姓名: {{ selectedTeacher.username }}</p>
          <p>电话号码: {{ selectedTeacher.phone_num }}</p>
          <p>教师照片:</p><img :src="selectedTeacher.tech_pic">
          <p>添加日期: {{ selectedTeacher.update_time }}</p>
        </div>
      </el-dialog>
      <!-- 修改老师照片-->
      <el-dialog v-model="dialogFormVisible" title="修改教师资料" width="500">
        <div v-if="selectedTeacher">
          <p>教师ID: {{ selectedTeacher.user_id }}</p>
          <p>真实姓名: {{ selectedTeacher.username }}</p>
          <p>电话号码: {{ selectedTeacher.phone_num }}</p>
          <p>教师照片:</p><img :src="selectedTeacher.tech_pic">
          <el-button type="info" @click="changePhoto">修改照片</el-button>
          <p>添加日期: {{ selectedTeacher.update_time }}</p>
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="handleUpdate">
              保存
            </el-button>
          </div>
        </template>
      </el-dialog>
      <!--      添加老师-->
      <el-dialog v-model="dialogInsertVisible" title="添加教学团队成员" width="500">
        <el-form :model="form">
          <el-form-item label="教师电话：">
            <el-input v-model="form.phone_num" autocomplete="off"/>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogInsertVisible = false">取消</el-button>
            <el-button type="primary" @click="handleAddTeacher(form)">
              保存
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {getTeacherTeam, updateTeacherTeam, deleteTeacherTeam, insertTeacherTeam} from "@/apis/apis.js";
import {ElMessage} from "element-plus";

const teachers = ref([{}])
const courseId = 1;
const dialogVisible = ref(false)
const dialogFormVisible = ref(false)
const dialogInsertVisible = ref(false)
const selectedTeacher = ref({})
const form = ref({
  course_id: courseId,
  phone_num: ''
})
let updateFile = null;
let delIds = [];

const handleSelectionChange = async (selection) => {
  console.log(selection);
  delIds = selection.map(item => item.tech_cour_id)
  console.log(delIds)
}

const fetchTeacherTeam = async (data) => {
  const rep = await getTeacherTeam(data)
  try {
    if (rep.data.status === 1) {
      teachers.value = rep.data.data
    } else {
      ElMessage.error(rep.data.msg)
    }
  } catch (err) {
    console.log(err)
    ElMessage.error("连接失败！")
  }
}
//处理增加弹窗button
const handleInsert = () => {
  dialogInsertVisible.value = true;
}
//处理保存button
const handleAddTeacher = async (form) => {
  const rep = await insertTeacherTeam(form)
  try {
    if (rep.data.status === 1) {
      ElMessage.success('添加成功!')
      await fetchTeacherTeam(courseId);
    } else {
      ElMessage.error(rep.data.msg)
    }
  } catch (err) {
    console.log(err)
    ElMessage.error("连接失败！")
  }
}
//处理删除（批量
const handleDel = async () => {
  if (delIds.length <= 0) {
    ElMessage.warning("未选中删除对象")
    return
  }
  const rep = await deleteTeacherTeam(delIds)
  try {
    if (rep.data.status === 1) {
      ElMessage.success('删除成功!')
      teachers.value = teachers.value.filter(teacher => !delIds.includes(teacher.tech_cour_id));
    } else {
      ElMessage.error(rep.data.msg)
    }
  } catch (err) {
    console.log(err)
    ElMessage.error("连接失败！")
  }
}
//选择照片
const changePhoto = () => {
  const input = document.createElement('input');
  input.type = 'file';
  input.accept = 'image/*';
  input.onchange = (event) => {
    const file = event.target.files[0];
    if (file) {
      selectedTeacher.value.tech_pic = URL.createObjectURL(file);
      updateFile = file;
    }
  };
  input.click();
}
//查看教师详情
const handleClick = (teacher) => {
  dialogVisible.value = true;
  selectedTeacher.value = teacher;
  console.log(dialogVisible.value)
  console.log(selectedTeacher.value)
}
//编辑教师详情
const handleUpdateClick = (teacher) => {
  dialogFormVisible.value = true;
  selectedTeacher.value = teacher;
}
//修改
const handleUpdate = () => {
  const formData = new FormData();
  if (!updateFile) {
    ElMessage.warning("未选择图片")
    return
  }
  formData.append("file", updateFile);
  formData.append("techCourId", selectedTeacher.value.tech_cour_id)
  updateTeam(formData);

  dialogFormVisible.value = false;
}
//更新后端接口
const updateTeam = async (data) => {
  const rep = await updateTeacherTeam(data);
  console.log(rep.data)
  try {
    if (rep.data.status === 1) {
      ElMessage.success("更新成功！")
    } else {
      ElMessage.error(rep.data.msg)
    }
  } catch (err) {
    console.log(err)
    ElMessage.error("连接失败！")
  }
}
onMounted(() => {
  fetchTeacherTeam(courseId);
})
</script>

<style scoped>
.tech_team {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 0;

}

.team_content {
  margin: 20px;
  width: 80vw;
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  align-items: center;
  justify-content: space-around;
}

img {
  height: 300px;
  width: 200px;
  object-fit: cover;
  border-radius: 20px;
  overflow: hidden;
}

.teacher {
  box-shadow: 0 0 10px rgba(82, 68, 68, 0.3);
  transition: box-shadow, transform 0.3s ease; /* 添加过渡效果 */
}

.teacher:hover {
  box-shadow: 0 0 10px rgba(224, 62, 62, 0.3), /* 第一层阴影，轻微的内发光 */ 0 0 20px rgb(255, 223, 187), /* 第二层阴影，更强的内发光 */ 0 0 30px rgb(255, 243, 210); /* 第三层阴影，较弱的外发光 */
  transform: scale(1.2); /* 放大到原来的1.2倍 */
}

.setting_title {
  margin: 10px 0;
  font-family: 华文行楷, sans-serif;
  font-size: 40px;
  text-align: center;
}

.update_content {
  width: 80vw;
}
</style>